<template>
    <div class="account">
        <div class="account_content">
            <div class="content">
                <div>姓名</div>
                <el-input v-model="data.name" style="width: 200px; padding: 0 20px 0 20px;" @input="changeName" />
                <el-button type="primary">查询</el-button>
            </div>
            <div>
                <el-button plain @click="multipDel">删除选中</el-button>
            </div>
        </div>

        <div class="table_box">
            <el-table :data="listData.data" style="width: 100%;"
                @selection-change="selectChange" border>
                <el-table-column type="selection" width="55" />
                <el-table-column property="account" label="账号" width="250">
                </el-table-column>
                <el-table-column property="purview" label="权限" width="250" />
                <el-table-column property="name" label="姓名" width="250" />
                <el-table-column property="sex" label="性别" width="250" />
                <el-table-column property="phone" label="手机号" width="250" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页器 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="data.page" v-model:page-size="data.size" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="listData.total" />
        </div>

        <!-- 详情弹出框 -->
       <Dialog :data="InfoData.data" v-if="InfoData.data"></Dialog>

        <!-- 编辑弹出框 -->
        <Dialog2 @getdatalist="getdatalist" :data="EdidData.data" v-if="EdidData.data"></Dialog2>

        <!-- 删除弹出确认框 -->
        <Dialog3 @getdatalist="getdatalist" :data="DelData.data" v-if="DelData.data"></Dialog3>
    </div>
</template>

<script lang="ts" setup>
import {  reactive, ref, watchEffect } from 'vue'
import { ElTable } from 'element-plus'
import {  usersList, usersSearch,usersBatchdel } from '@/API/user.api';
import Dialog from './components/Account/dialogInfo.vue'
import Dialog2 from './components/Account/dialogEdit.vue'
import Dialog3 from './components/Account/dialogDel.vue'

interface User {
    account: string
    id: number
    name: string
    phone: string
    purview: string
    sex: string
    idcard: string
    headurl: string
    password: string
}
let InfoData = reactive({
    data:null
})
let EdidData = reactive({
    data:null
})
let DelData = reactive({
    data:null
})
// 点击详情按钮赋值传递
const handleInfo = (index: number, row: User) => {
    InfoData.data = row
}
// 点击编辑按钮赋值传递
const handleEdit = (index: number, row: User) => {
    EdidData.data = row
}
// 点击删除按钮赋值传递
const handleDelete = (index: number, row: User) => {
    DelData.data = row
}

const listData = reactive({
    data: [],
    total:0
})

// 根据昵称收索请求后端数据
async function getNameData() {
    let res = await usersSearch(data)
    listData.data = res.data.data
}
// 输入框变化搜索
const changeName = () => {
    getNameData()
}
const data = reactive({
    page: 1,
    size: 10,
    name: ''
})
// 页面渲染请求后端函数
async function getdatalist() {
    const res = await usersList(data)
    console.log(res);
    listData.data = res.data.data
    listData.total = res.data.total
}

watchEffect(() => {
    getdatalist();
    getNameData()
})

// 多选删除功能
const multipleSelection = ref<User[]>([])
const selectChange = (val: User[]) => {
    multipleSelection.value = val
    console.log(val);
    
}
// 点击多选删除
const multipDel = () => {
    let arr = []
    multipleSelection.value.forEach(item => {
        arr.push(item.id)
    })
    console.log(arr);
    let ids = JSON.stringify('arr')
    const getDelAll = async()=>{
    const res = await usersBatchdel({ids:arr})
        console.log(res);
    }
    getDelAll()
}


</script>

<style scoped lang="scss">
.account {
    padding: 15px;

    .account_content {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;

        .content {
            display: flex;
        }
    }
}

// 分页器
.demo-pagination-block {
    margin-top: 20px;
}

// 弹出框照片
.imgggg {
    width: 160px;
    height: 160px;
}

// table
.table_box{
    // position:absolute; 
    // width:1643px;
}
</style>